<template>
	<view class="evaluate-question page">
		<view class="evaluate-question-title">{{routeParams.ysmc||''}}医生在{{routeParams.ghrq||''}}就诊</view>
		<view class="evaluate-question-subtitle flexR">
			<text>总体评分：</text>
			<view class="star">
				<u-rate v-model="starValue" :disabled="routeParams.whetherCompleted==='0'"></u-rate>
			</view>
		</view>
		<view class="evaluate-question-main">
			<view v-if="routeParams.whetherCompleted==='0'">
				<view v-for="(item,index) in questionList" :key="index">
					<view class="evaluate-question-main-item-title">{{(index+1) + "、" + item.name }}</view>
					<view class="evaluate-question-main-item-content" style="color: #000000;padding: 20rpx;">{{item.answer||'无'}}</view>
				</view>
			</view>
			<view v-else>
				<view v-for="(item, index) in questionList" :key="item.pageKey" class="evaluate-question-main-item">
					<view class="evaluate-question-main-item-title">{{(index+1) + "、" + item.name }}</view>
					<view class="evaluate-question-main-item-content">
						<view v-if="item.questionType==='input'">
							<u-input v-model="formInfo[item.questionId]" trim placeholder="请填写"/>
						</view>
						<checkbox-group v-else-if="item.questionType==='checkbox'" @change="onChange($event,item.questionId)">
							<label v-for="(cItem, i) in item.value" :key='i'>
								<checkbox :value="cItem" :checked="false"/><text>{{cItem}}</text>
							</label>
						</checkbox-group>
						<radio-group v-else-if="item.questionType==='radio'" @change="onChange($event,item.questionId)">
							<label v-for="(cItem, i) in item.value" :key='i'>
								<radio :value="cItem" :checked="false" /><text>{{cItem}}</text>
							</label>
						</radio-group>
					</view>
				</view>
				<view style="height: 90rpx;margin: 30rpx;" @click="onSubmit">
					<view class="theme-light-btn">提交</view>
				</view>
			</view>
		</view>
		<Load :load="load"/>
	</view>
</template>
<script>
	import { mapGetters } from 'vuex';
	import { getQuestion } from '@/api/otherService.js'
	import { poEvaluateRegistered } from '@/api/home.js'
	import Load from '@/components/Load/index.vue'
	import dayjs from 'dayjs'
	export default {
		components:{ Load },
		data() {
			return {
				load:true,
				routeParams:'',
				starValue:0,
				type:1,
				questionList:[],
				formInfo:{},
			};
		},
		computed:{
			...mapGetters(['userInfo'])
		},
		async onLoad(op) {
			if(op.params){
				this.routeParams = JSON.parse(op.params)
			}
			await this.$onLaunched
			this.initData()
		},
		methods: {
			initData(){
				// if(!this.userInfo.patId){
				// 	uni.navigateTo({
				// 		// url:'/pages/Login/index'
				// 		url:'/pages/Login/addPatient'
				// 	})
				// 	return
				// }
				this.load = true
				let info = {
					type:this.type,
					patientId: this.userInfo.patId,
					paperId:this.routeParams.paperId
				}
				getQuestion(info).then(data => {
					this.load = false
					data = data[0]
					let res = data.hospitalQuestionList||[]
					if(data.whetherCompleted==='1'){
						res.forEach((item, i) => {
							if(item.questionId){
								this.formInfo[item.questionId] = ''
							}
							item.pageKey = 'question' + i
							if(item.questionType==='checkbox'||item.questionType==='radio'){
								item.value = item.value.split('|')
							}
						})
					}else{
						this.starValue = data.star||0
					}
					this.questionList = res
				}).catch(e => {
					this.load = false
					this.questionList = []
				})
			},
			onChange(val,id){
				this.formInfo[id] = val.detail.value
			},
			onSubmit(){
				let flag = false, list = []
				this.questionList.forEach(item => {
					if(!this.formInfo[item.questionId]){
						flag = true
					}else{
						if(item.questionType==='checkbox'){
							let str = ''
							this.formInfo[item.questionId].forEach(cItem => {
								str += cItem + ','
							})
							list.push({
								questionId: item.questionId,
								answer: str
							})
						}else{
							list.push({
								questionId: item.questionId,
								answer: this.formInfo[item.questionId]
							})
						}
					}
				})
				if(flag){
					this.$u.toast('请对医生服务进行评价')
					return
				}
				if(!this.starValue){
					this.$u.toast('请对医生进行整体评分')
					return
				}
				let params = {
					...this.routeParams,
					patientId:this.userInfo.patId,
					problemAnswerList:list,
					star:this.starValue
				}
				this.load = true
				poEvaluateRegistered(params).then(data => {
					this.load = false
					this.$u.toast('提交成功')
					this.initData()
				}).catch(e => {
					this.load = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.evaluate-question{
		height: calc(100vh);
		padding: 30rpx;
		overflow: scroll;
		// background-color: $uni-bg-color;
		&-title{
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
		}
		&-subtitle{
			margin: 20rpx 0;
		}
		&-main{
			margin-top: 30rpx;
			&-item{
				margin-top: 20rpx;
				&-content{
					margin-top: 10rpx;
					label{
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
					}
					checkbox{
						transform:scale(0.7);
						border-radius: 50%;
					}
					radio{
						transform:scale(0.7);
					}
					input{
						width: calc(100vw - 80rpx);
						border: none;
						padding: 0 10rpx;
						border-bottom: 1px solid $border-color;
					}
				}
			}
			&-user{
				margin-top: 30rpx;
				.card-row{
					margin-top: 10rpx;
					font-size: 14px;
					color: #000000;
					>label{
						width: 180rpx;
						text-align: left;
						font-size: 28rpx;
					}
					input{
						font-size: 14px;
						padding: 0;
						flex: 1;
					}
				}
			}
		}
		.calendar-style{
			height: 35px;
			border-bottom: 1px solid $border-color;
			font-size: 13px;
			>view{
				height: 100%;
				>text{
					line-height: 35px;
				}
			}
		}
	}
</style>
